<template>
  <div class="strut-div">
    <iframe id="ng-iframe" src="https://www.thingjs.com/pp/da591afb8c35ae09bc0ee323"></iframe>
    <div class="map-mask" style="pointer-events: none;"><img src="../../../assets/imgs/v2/mask-v2.png" /></div>

    <div class="top-number">
      <div v-for="(item, index) in agricultureOverviewChart" :key="index">
        <p class="lcd-font"><coun-to :end="item.num" usegroup></coun-to></p>
        <div>{{ item.character }} ({{ item.unit }})</div>
      </div>
    </div>

    <div class="left-list">
      <div class="area-item" :class="{ 'area-item-active': index == activeIndex && display }" v-for="(item, index) in showList" :key="index">{{ item.title }}</div>
    </div>

    <div class="rb-map"><div id="ng-map"></div></div>

    <div class="float-window" v-if="showList.length != 0" :class="{'float-window-hide':!display}">
      <h2>{{ showList[activeIndex].title }}</h2>
      <p>{{ showList[activeIndex].description }}</p>
    </div>
  </div>
</template>

<script>
import { agricultureOverviewChart } from '@/network/tg-fake-data.js';
import CounTo from '@/components/count-to';
import echarts from 'echarts';
import ngMapData from '../../../../static/taigu.js';
import ngBgData from '../../../../static/tg.js';

export default {
  components: {
    CounTo
  },
  data() {
    return {
      agricultureOverviewChart: agricultureOverviewChart,
      activeIndex: 0,
      myChart: null,
      showList: [],
      display:false,
    };
  },
  mounted() {
    this.initList();
    echarts.registerMap('NG', ngMapData);
    echarts.registerMap('BG', {
      type: 'FeatureCollection',
      features: [ngBgData]
    });
    this.initMap();
  },
  methods: {
    switchTo(index) {
      let iframe = document.getElementById('ng-iframe');
      let iframeWindow = iframe.contentWindow;
      iframeWindow.postMessage(
        {
          index: index
        },
        '*'
      );
      this.display = false;
      setTimeout(() => {
        this.activeIndex = index;
        this.display = true;
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        });
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index
        });
      }, 2000);
    },
    initList() {
      ngMapData.features.map(item => {
        this.showList.push({
          title: item.properties.name,
          description: item.properties.content
        });
      });
    },
    initMap() {
      this.myChart = echarts.init(document.getElementById('ng-map'));
      // console.log(this.myChart);
      let option = {
        visualMap: {
          show: false,
          min: 500,
          max: 50000,
          text: ['High', 'Low'],
          left: 'right',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8']
          }
        },
        geo: {
          map: 'BG',
          aspectScale: 0.8,
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 0.5,
              color: {
                type: 'linear-gradient',
                x: 0,
                y: 1500,
                x2: 2500,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#009DA1' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#005B9E' // 50% 处的颜色
                  }
                ],
                global: true // 缺省为 false
              },
              opacity: 0.5
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          },
          z: 2
        },
        series: [
          {
            name: '农谷',
            type: 'map',
            mapType: 'NG',
            aspectScale: 0.85, //地图长度比
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#FFF',
                  fontSize: 17
                }
              }
            },
            data: [
              { name: '农谷科技创新城', value: 17000 },
              { name: '北方林果科技园', value: 1000 },
              { name: '高新技术产业园', value: 5000 },
              { name: '特色农产品加工交易园', value: 20000 },
              { name: '省级经济开发区', value: 25000 },
              { name: '设施农业推广示范区', value: 30000 },
              { name: '生物技术推广示范区', value: 18000 },
              { name: '绿色养殖产业推广示范区', value: 2300 },
              { name: '红枣苗木特色产业推广示范区', value: 20000 },
              { name: '农村产业融合发展示范区', value: 16000 }
            ]
          }
        ]
      };
      this.myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.map-mask {
  width: 100%;
  height: 100%;
  opacity: 0.9;
  img {
    width: 100%;
    height: 100%;
  }
}

.top-number {
  position: absolute;
  left: 750px;
  top: 120px;
  height: 100px;
  width: 1572px;
  // background-color: yellow;

  > div {
    width: 12.5%;
    float: left;
    text-align: center;
    margin-top: 25px;
    > p {
      color: #ffcb14;
      font-size: 36px;
      text-shadow: 0.1rem 0rem 0.5rem rgba($color: #ffcb14, $alpha: 0.4), -0.1rem 0rem 0.5rem rgba($color: #ffcb14, $alpha: 0.4),
        0rem 0.1rem 0.5rem rgba($color: #ffcb14, $alpha: 0.4), 0rem -0.1rem 0.5rem rgba($color: #ffcb14, $alpha: 0.4);
    }
    > div {
      font-size: 12px;
    }
  }
}
.rb-map {
  position: absolute;
  width: 666px;
  height: 469px;
  bottom: 30px;
  right: 492px;
  background: url(../../../assets/imgs/tg/map-window.png);

  #ng-map {
    width: 100%;
    height: 100%;
  }
}

.left-list {
  position: absolute;
  top: 245px;
  left: 565px;
  width: 363px;
  .area-item {
    width: 322px;
    height: 85px;
    font-size: 16px;
    line-height: 85px;
    box-sizing: border-box;
    padding-left: 85px;

    // background: url(../../../assets/imgs/tg/area-item-bg.png);
    transition: width height padding 1s;
    &:nth-of-type(odd) {
      background: url(../../../assets/imgs/tg/area-item-bg.png) no-repeat;
      text-shadow: 0.1rem 0rem 0.5rem rgba($color: #439cf8, $alpha: 0.4), -0.1rem 0rem 0.5rem rgba($color: #439cf8, $alpha: 0.4),
        0rem 0.1rem 0.5rem rgba($color: #439cf8, $alpha: 0.4), 0rem -0.1rem 0.5rem rgba($color: #439cf8, $alpha: 0.4);
    }
    &:nth-of-type(even) {
      background: url(../../../assets/imgs/tg/area-item-bg2.png) no-repeat;
      text-shadow: 0.1rem 0rem 0.5rem rgba($color: #5ed0fa, $alpha: 0.4), -0.1rem 0rem 0.5rem rgba($color: #5ed0fa, $alpha: 0.4),
        0rem 0.1rem 0.5rem rgba($color: #5ed0fa, $alpha: 0.4), 0rem -0.1rem 0.5rem rgba($color: #5ed0fa, $alpha: 0.4);
    }
  }

  .area-item-active {
    width: 363px;
    height: 93px;
    line-height: 93px;
    padding-left: 93px;
    font-size: 18px;
    background: url(../../../assets/imgs/tg/area-item-bg-active.png) no-repeat !important;
    text-shadow: 0.1rem 0rem 0.5rem rgba($color: #f7cc49, $alpha: 0.4), -0.1rem 0rem 0.5rem rgba($color: #f7cc49, $alpha: 0.4),
      0rem 0.1rem 0.5rem rgba($color: #f7cc49, $alpha: 0.4), 0rem -0.1rem 0.5rem rgba($color: #f7cc49, $alpha: 0.4) !important;
  }
}

.float-window {
  position: absolute;
  width: 449px;
  height: 169px;
  top: 265px;
  right: 890px;
  background: url(../../../assets/imgs/tg/float-window.png);
  opacity:1;
  transition: opacity 0.8s;

  h2 {
    width: 230px;
    height: 60px;
    line-height: 60px;
    float: right;
    text-align: center;
    font-size: 16px;
    color: #cea944;
  }
  p {
    margin-top: 60px;
    padding: 3px 30px 10px 10px;
    font-size: 14px;
    line-height: 1.8em;
  }
}

.float-window-hide {
  opacity:0;
}
</style>
